<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
		.mui-popover1 {
						top: 44px;
						bottom: 44px;
					}
		.mui-popover2 {
						bottom: 44px;
					}
		.img11{
			width: 70px;
			height: 70px;
		}
		</style>
	</head>

	<body>	
	<!-- 弹出菜单容器 -->
	<div id="popover" class="mui-popover mui-popover1">
	  <ul class="mui-table-view">
	    <li class="mui-table-view-cell"><a href="https://www.baidu.com">发布活动</a></li>

	    <li class="mui-table-view-cell"><a href="#">活动报名须知</a></li>
	  </ul>
	</div>
	<!-- 操作列表 -->
	<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
	    <!-- 可选择菜单 -->
	    <ul class="mui-table-view">
	      <li class="mui-table-view-cell">
	        <a href="#">查看历史活动</a>
	      </li>
	      <li class="mui-table-view-cell">
	        <a href="#">查看即将开始活动</a>
	      </li>
	    </ul>
	    <!-- 取消菜单 -->
	    <ul class="mui-table-view">
	      <li class="mui-table-view-cell">
	        <a href="#sheet1"><b>取消</b></a>
	      </li>
	    </ul>
	</div>
		<!-- 侧滑导航根容器 -->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		  <!-- 菜单容器 -->
		  <aside class="mui-off-canvas-right">
				<a class="mui-tab-item" href="#sheet1">
					<span class="mui-tab-label">消息</span>
				</a>
				  
		  </aside>
		  <!-- 主页面容器 -->
		  <div class="mui-inner-wrap">
		    <!-- 主页面标题 -->
			<header class="mui-bar mui-bar-nav">
				<a href="#" class="mui-action-menu mui-icon mui-icon-more" id='openPopover'></a>
				<h1 class="mui-title">垃圾分类</h1>
				<a  class="mui-icon mui-icon-plus mui-pull-right" href="#sheet1">
				</a>
				  
				  <div class="mui-slider">
				    <div class="mui-slider-group">
				      <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div>
				      <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div>
				      <div class="mui-slider-item"><a href="#"><img src="images/3.jpg" /></a></div>
				    </div>
				  </div>
			</header>
				<div style="padding-top:290px;padding-left: 15px;">
					
					<img class="img11" src="images/垃圾分类/可回收物.png">
					<img class="img11" src="images/垃圾分类/其他垃圾.png">
					<img class="img11" src="images/垃圾分类/厨余垃圾.png">
					<img class="img11" src="images/垃圾分类/有害垃圾.png">
				</div>
					
				<div style="margin-top:2px;background-color: #e3ffe2;display: flex;flex-direction: row;">
					<div style="width:35%;"><img style="width: 120px;height: 90px;padding-top: 10px;padding-left: 10px;" src="images/1.jpg"></div>
					<div style="width:50%;padding-top: 10px;font-size: 18px;">垃圾大扫除<p>组织学生进行校园垃圾清洁活动，共需30人。截止报名时间12月25日</p></div>
					<div style="width:15%;line-height:100px;background-color:rgb(234, 139, 55);padding-left: 8px;font-size: 20px;"><a href="from.html" style="color: wheat;">报名</a></div>
				</div>
				
				<div style="margin-top:2px;background-color: #e3ffe2;display: flex;flex-direction: row;">
					<div style="width:35%;"><img style="width: 120px;height: 90px;padding-top: 10px;padding-left: 10px;" src="images/2.jpg"></div>
					<div style="width:50%;padding-top: 10px;font-size: 18px;">分类知识竞赛<p>校园垃圾分类知识竞赛，单人，或者组队参加。截止报名时间12月28日</p></div>
					<div style="width:15%;line-height:100px;background-color:rgb(234, 139, 55);padding-left: 8px;font-size: 20px;"><a href="from.html" style="color: wheat;">报名</a></div>
				</div>
				
				<div style="margin-top:2px;background-color:#e3ffe2;display: flex;flex-direction: row;">
					<div style="width:35%;"><img style="width: 120px;height: 90px;padding-top: 10px;padding-left: 10px;" src="images/3.jpg"></div>
					<div style="width:50%;padding-top: 10px;font-size: 18px;">义卖课堂<p>组织学生进行校园义卖活动，宣传环保知识，共需15人。截止报名时间12月29日</p></div>
					<div style="width:15%;line-height:100px;background-color:rgb(234, 139, 55);padding-left: 8px;font-size: 20px;"><a href="from.html" style="color: wheat;">报名</a></div>
				</div>
				
			</div>
			</div>	
			

	
		
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<img id="img1"  class="mui-icon" src="images/tabar/首页.png"/>
				<span  class="mui-tab-label">首页</span>
			</a>
		
			<a class="mui-tab-item" href="./encyclopedia/encyclopedia.html">
				<img id="img2"  class="mui-icon" src="images/tabar/课本.png"/>
				<span  class="mui-tab-label">学习吧</span>
			</a>
		
			<a class="mui-tab-item">
				<img id="img3"   class="mui-icon" src="images/tabar/发现.png"/>
				<span  class="mui-tab-label">发现</span>
			</a>
		
			<a class="mui-tab-item" href="me.html">
				<img id="img4"   class="mui-icon" src="images/tabar/我的.png"/>
				<span  class="mui-tab-label">我的</span>
			</a>
		
		</nav>
		 </div>
		</div>
		</body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var op=mui('#popover');
			document.getElementById('openPopover').addEventListener('tap', function() {
				op.popover('show');
			});
			window.onload=function(){
				mui('body').on('tap','a',function(){
					window.top.location.href=this.href;
				})
			}
			var offCanvasWrapper = mui('#offCanvasWrapper');
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');
			});
			if (offCanvasWrapper.offCanvas().isShown()) {
			offCanvasWrapper.offCanvas('show');
			} else {
				offCanvasWrapper.offCanvas('hide');}
			
		</script>

</html>
